/* 1.slot 2.对外提供数据 滑动方向*/
<template>
    <view @touchstart="handleTouchstart"
    @touchend="handleTouchend">
        <slot></slot>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 按下的时间
            startTime:0,
            // 按下的坐标
            startX:0,
            startY:0
        }
    },
    methods:{
        // 用户按下屏幕
        handleTouchstart(event){
            this.startTime = Date.now();
            this.startX = event.changedTouches[0].clientX;
            this.startY = event.changedTouches[0].clientY;
        },
        // 离开屏幕
        handleTouchend(event){
            const endTime = Date.now();
            const endX = event.changedTouches[0].clientX;
            const endY = event.changedTouches[0].clientY;
            // 判断用户按下的时长
            if(endTime - this.startTime > 2000){
                return
            }
            let direction = "";
            // 先判断用户滑动距离 是否合法 如果合法，判断滑动方向
            if(Math.abs(endX-this.startX)>10&&Math.abs(endY-this.startY)<10){
                // 滑动方向
                direction = endX-this.startX>0?"right":"left";
            }else{
                return;
            }
            // 用户做了合法的滑动操作
            this.$emit("swiperAction",{direction});
        }
    }
}
</script>

<style lang="scss">
    
</style>